<template>
  <div class="page_main">
    <div class="search_box">
      <el-form ref="searchForm" :model="searchForm" :inline="true" size="mini">
        <search-form-box :show-more-btn="false">
          <template slot="showSearch">
            <el-form-item prop="media_type_id">
              <el-select v-model="searchForm.media_type_id">
                <el-option v-for="item in media_type_arr" :key="item.id+'_'+item.is_media"
                           :value="item.id+'_'+item.is_media" :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-button type="primary" size="mini" plain @click="getList">查询</el-button>
            <el-button type="info" size="mini" plain @click="restFrom">重置</el-button>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <el-table v-loading="tableLoading" :data="offerArr" stripe size="mini" border>
      <el-table-column label="序号" width="50" type="index" align="center"></el-table-column>
      <el-table-column label="媒体名称" prop="media_type_name" min-width="100" align="center"></el-table-column>
      <el-table-column label="刊例总价" min-width="200" align="center">
        <template slot-scope="scope">
          <div>
            <div>
              <el-tag v-if="scope.row.media_id == 1 && scope.row.is_media == 1" type="primary" size="mini">
                {{
                  scope.row.weekly_price + '/元' + (companyMap.get(scope.row.media_id + '-' + scope.row.is_media)) + '/周'
                }}
              </el-tag>
            </div>
            <div>
              <el-tag v-if="scope.row.media_id != 1 || scope.row.is_media != 1" type="primary" size="mini">
                {{
                  scope.row.daily_price + '/元' + (companyMap.get(scope.row.media_id + '-' + scope.row.is_media)) + '/日'
                }}
              </el-tag>
            </div>
            <div>
              <el-tag v-if="scope.row.media_id != 1 || scope.row.is_media != 1" type="primary" size="mini">
                {{
                  scope.row.monthly_price + '/元' + (companyMap.get(scope.row.media_id + '-' + scope.row.is_media)) + '/月'
                }}
              </el-tag>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="tmpRow.media_type_name+'刊例总价修改'" width="20%" center :visible.sync="centerDialogVisible">
      <el-form ref="cuForm" :model="tmpRow" :rules="rules" size="mini" label-width="80px">
        <el-form-item v-if="tmpRow.media_id != 1 || tmpRow.is_media != 1" label="天价格" prop="daily_price">
          <el-input v-model="tmpRow.daily_price" placeholder="请输入的天价格"></el-input>
        </el-form-item>
        <el-form-item v-if="tmpRow.media_id == 1 && tmpRow.is_media == 1" label="周价格" prop="weekly_price">
          <el-input v-model="tmpRow.weekly_price" placeholder="请输入的周价格"></el-input>
        </el-form-item>
        <el-form-item v-if="tmpRow.media_id != 1 || tmpRow.is_media != 1" label="月价格" prop="monthly_price">
          <el-input v-model="tmpRow.monthly_price" placeholder="请输入的月价格"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { edit, getMediaList, getOfferList } from '@/api/offer/offer'
import SearchFormBox from '@/components/SearchFormBox'

export default {
  name: 'update',
  components: {
    SearchFormBox
  },
  data() {
    return {
      offerArr: [],
      searchForm: {
        media_type_id: null
      },
      media_type_arr: [],
      tableLoading: false,
      tmpRow: {},
      companyMap: new Map([
          ['1-1', ''],
          ['2-1', '幅/'],
          ['3-1', '幅/'],
          ['7-1', ''],
          ['8-1', '幅/'],
          ['9-1', '幅/'],
          ['10-1', '幅/'],
          ['11-1', ''],
          ['12-1', '幅/'],
          ['13-1', '幅/'],
          ['1-0', '组/'],
          ['2-0', '组/'],
          ['3-0', '组/']
        ]
      ),
      centerDialogVisible: false,
      rules: {
        daily_price: [
          { required: true, message: '请输入天价格', trigger: 'blur' }
        ],
        weekly_price: [
          { required: true, message: '请输入周价格', trigger: 'blur' }
        ],
        monthly_price: [
          { required: true, message: '请输入月价格', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.initMediaTypeArr()
    this.getList()
  },
  methods: {
    getList() {
      this.tableLoading = true
      let req = {}
      if (this.searchForm.media_type_id) {
        let arr = this.searchForm.media_type_id.split('_')
        req.mediaTypeId = arr[0]
        req.is_media = arr[1]
      }
      getOfferList(req).then(res => {
        this.offerArr = res.data
        this.tableLoading = false
      })
    },
    initMediaTypeArr() {
      getMediaList().then(res => {
        this.media_type_arr = res.data
      })
    },
    restFrom() {
      this.$refs.searchForm.resetFields()
      this.getList()
    },
    edit() {
      this.$refs.cuForm.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          edit(this.tmpRow).then(res => {
            if (res.data) {
              this.$message.success('修改成功')
              this.centerDialogVisible = false
              this.getList()
            }
            loading.close()
          }).catch(() => {
            this.$message.error('修改失败')
            loading.close()
          })
        }
      })
    },
    showEdit(row) {
      this.tmpRow = Object.assign({}, row)
      this.centerDialogVisible = true
      this.$nextTick(() => {
        this.$refs.cuForm.clearValidate()
      })
    }
  }
}
</script>

<style scoped>
.page_main {
  padding: 0 20px;
}

.search_box {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
